<template>
	<view>
		<view class="box">
			<view class="cu-bar search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input v-model="key" @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
				</view>
				<view class="action">
					<button class="cu-btn bg-green shadow-blur round" @click="onSearch">搜索</button>
				</view>
			</view>
		</view>
		<view class="u-tabs-box">
			<u-tabs-swiper activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
		</view>
		<!--<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
					<view class="page-box">
						<view class="order" v-for="(res, index) in orderList[0]" :key="res.id">
							<view class="top">
								<view class="left">
									<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
									<view class="store">{{ res.store }}</view>
									<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
								</view> 
								<view class="right">{{ res.deal }}</view>
							</view>
							<view class="item flex justify-around" v-for="(item, index) in res.goodsList" :key="index">
								<view class="left"><image :src="item.goodsUrl" mode="aspectFill"></image></view>
								<view class="right">
									<view class="title u-line-2">{{ item.title }}</view>
									<view class="type">{{ item.type }}</view>
									<view class="delivery-time">{{ item.deliveryTime }}</view>
								</view>
								
							</view>
							<view class="total">
								共{{ totalNum(res.goodsList) }}物品需回收
								
							</view>
							<view class="bottom">
								<view class="more"><u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon></view>
								
								<view class="evaluate btn">匿名评价</view>
							</view>
						</view>
						<u-loadmore :status="loadStatus[0]" bgColor="#f2f2f2"></u-loadmore>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
					<view class="page-box">
						<view class="order" v-for="(res, index) in  orderList[1]" :key="res.id">
							<view class="top">
								<view class="left">
									<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
									<view class="store">{{ res.store }}</view>
									<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
								</view>
								<view class="right">{{ res.deal }}</view>
							</view>
							<view class="item" v-for="(item, index) in res.goodsList" :key="index">
								<view class="left"><image :src="item.goodsUrl" mode="aspectFill"></image></view>
								<view class="content">
									<view class="title u-line-2">{{ item.title }}</view>
									<view class="type">{{ item.type }}</view>
									<view class="delivery-time">发货时间 {{ item.deliveryTime }}</view>
								</view>
								<view class="right">
									<view class="price">
										￥{{ priceInt(item.price) }}
										<text class="decimal">.{{ priceDecimal(item.price) }}</text>
									</view>
									<view class="number">x{{ item.number }}</view>
								</view>
							</view>
							<view class="total">
								共{{ totalNum(res.goodsList) }}件商品 合计:
								<text class="total-price">
									￥{{ priceInt(totalPrice(res.goodsList)) }}.
									<text class="decimal">{{ priceDecimal(totalPrice(res.goodsList)) }}</text>
								</text>
							</view>
							<view class="bottom">
								<view class="more"><u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon></view>
								<view class="logistics btn">查看物流</view>
								<view class="exchange btn">卖了换钱</view>
								<view class="evaluate btn">评价</view>
							</view>
						</view>
						<u-loadmore :status="loadStatus[1]" bgColor="#f2f2f2"></u-loadmore>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;">
					<view class="page-box">
						<view>
							<view class="centre">
								<image src="https://cdn.uviewui.com/uview/template/taobao-order.png" mode=""></image>
								<view class="explain">
									您还没有相关的订单
									<view class="tips">可以去看看有那些想买的</view>
								</view>
								<view class="btn">随便逛逛</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
					<view class="page-box">
						<view class="order" v-for="(res, index) in  orderList[3]" :key="res.id">
							<view class="top">
								<view class="left">
									<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
									<view class="store">{{ res.store }}</view>
									<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
								</view>
								<view class="right">{{ res.deal }}</view>
							</view>
							<view class="item" v-for="(item, index) in res.goodsList" :key="index">
								<view class="left"><image :src="item.goodsUrl" mode="aspectFill"></image></view>
								<view class="content">
									<view class="title u-line-2">{{ item.title }}</view>
									<view class="type">{{ item.type }}</view>
									<view class="delivery-time">规格 {{ item.deliveryTime }}</view>
								</view>
								<view class="right">
									<view class="price">
										￥{{ priceInt(item.price) }}
										<text class="decimal">.{{ priceDecimal(item.price) }}</text>
									</view>
									<view class="number">x{{ item.number }}</view>
								</view>
							</view>
							<view class="total">
								共{{ totalNum(res.goodsList) }}需回收物品 合计:
								<text class="total-price">
									￥{{ priceInt(totalPrice(res.goodsList)) }}.
									<text class="decimal">{{ priceDecimal(totalPrice(res.goodsList)) }}</text>
								</text>
							</view>
							<view class="bottom">
								<view class="more"><u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon></view>
								<view class="logistics btn">查看物流</view>
								<view class="exchange btn">卖了换钱</view>
								<view class="evaluate btn">评价</view>
							</view>
						</view>
						<u-loadmore :status="loadStatus[3]" bgColor="#f2f2f2"></u-loadmore>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>-->
		<view class="cu-card article no-card">
			<view v-for="(article,index) in articleList" :key="index" class="cu-item shadow" @click="openArticle(article.id)">
				<view class="title"><view class="text-cut">{{article.title}}</view></view>
				<view class="content">
					<image :src="article.first_picture"
					 mode="aspectFill"></image>
					<view class="desc">
						<view class="text-content">{{article.synopsis}}</view>
						<view >
							<view v-for="(tag,index) in article.tags" :key="index" class="cu-tag light sm round" :class="'bg-' +tag.name ">{{tag.title}}</view>
						</view>
					</view>
				</view>
				<view class="margin-top-sm flex justify-between">
					<view class="text-gray text-df padding-left"></view>
					<view class="text-gray text-sm text-right padding-right">					
						<text class="cuIcon-attentionfill margin-lr-xs"></text> {{article.views}}
						<text class="cuIcon-appreciatefill margin-lr-xs"></text> {{article.islikes}}
						<text class="cuIcon-messagefill margin-lr-xs"></text> {{article.messages}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ColorList: this.ColorList,
				tagList:[],
				articleList:[],
				tags:'',
				key:'',
				list: [
					{
						name: '最新推荐'
					},
					{
						name: '小知识'
					},
					{
						name: '生活窍门'
					},
					{
						name: '环保资讯'
					}
				],
				current: 0,
			};
		},
		onLoad() {
			
		},
		// 监听页面显示
		onShow() {
			this.allArticle();
			/*for(let i=0;i<this.articleList.length;i++){
				this.tagList=this.articleList[i].tags.split(';')
				this.articleList[i].tags=[]
				for(let j=0;j<this.tagList.length;j++){
					let tag={name:this.ColorList[j].name,title:this.tagList[j]}
				    this.articleList[i].tags.push(tag)
					console.info(this.articleList[i].tags[j].name)
				}
				
			}*/
			
			
		},
		computed: {
			
		},
		methods: {
			change(index) {
				this.swiperCurrent = index;
				//this.getOrderList();
			},
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0
			},
			allArticle(){
				this.$H.get('/find/article/get-articles').then(res=>{
					let [err,result] = res;
					if(result.data.code == '200'){
						this.articleList = result.data.data;
						
						for(let i=0;i<this.articleList.length;i++){
							this.tagList=this.articleList[i].tags.split(';')
							this.articleList[i].tags=[]
							for(let j=0;j<this.tagList.length-1;j++){
								let tag={name:this.ColorList[j].name,title:this.tagList[j]}
							    this.articleList[i].tags.push(tag)
								//console.info(this.articleList[i].tags[j].name)
							}
							
						}
						
						return;
					}
					/*if(result.data.code == '402'){
						this.status = '0';
					}*/
				})
			},
			// 跳转到订单详情,携带用户状态和订单id
			openArticle(e){
				uni.navigateTo({
					url: 'articledetail?id='+e,
					animationType: 'slide-in-right',
					//animationDuration: '200'
				})
			},
			onSearch(){
				console.info(this.key)
				this.$H.get('/find/article/lucene-search/'+this.key).then(res=>{
					let [err,result] = res;
					if(result.data.code == '200'){
						this.articleList = result.data.data;
						
						for(let i=0;i<this.articleList.length;i++){
							this.tagList=this.articleList[i].tags.split(';')
							this.articleList[i].tags=[]
							for(let j=0;j<this.tagList.length-1;j++){
								let tag={name:this.ColorList[j].name,title:this.tagList[j]}
							    this.articleList[i].tags.push(tag)
								//console.info(this.articleList[i].tags[j].name)
							}
							
						}
						
						return;
					}
				})
			}
		}
	}
</script>

<style>
</style>
